<template>
  <div>
    <a-button :style="{ marginBottom: '1rem' }" type="primary" @click="handleAddPatient"> 新增</a-button>
    <a-modal
      :title="patientDialogTitle"
      :visible="addPatientInfoVisible"
      :confirm-loading="confirmLoading"
      :footer="null"
      @cancel="handleCancel1"
      width="700px"
    >
      <a-form-model :labelCol="{ span: 8 }" :model="addParams" :wrapperCol="{ span: 16 }" ref="editform" :rules="rules">
        <a-row :gutter="[8, 8]">
          <a-col :span="10">
            <a-form-model-item label="姓名" ref="name" prop="patientName">
              <a-input
                v-model="addParams.patientName"
                :max-length="10"
                @blur="
                  () => {
                    $refs.name.onFieldBlur()
                  }
                "
                placeholder="请输入患者姓名"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="手机号码" required prop="patientMobile">
              <a-input v-model="addParams.patientMobile" placeholder="手机号码必须为纯11位数字" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="[8, 8]">
          <a-col :span="10">
            <a-form-model-item label="性别" prop="patientSex">
              <a-select v-model="addParams.patientSex" placeholder="性别">
                <a-select-option :value="1">男性</a-select-option>
                <a-select-option :value="2">女性</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="出生日期" prop="patientBirth">
              <a-date-picker
                v-model="addParams.patientBirth"
                :style="{ width: '215px' }"
                :disabled-date="disabledDate1"
                placeholder="请选择时间"
                @change="onChange1"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="[8, 8]">
          <a-col :span="10">
            <a-form-model-item label="身高" prop="height">
              <a-input-number v-model="addParams.height" placeholder="单位:cm" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="体重">
              <a-input-number v-model="addParams.weight" placeholder="单位:公斤" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <!--<a-row :gutter='[8, 8]'>
          <a-col :span='10'>
            <a-form-model-item label='职业'>
              <a-select
                v-model='addParams.occupation'
                v-decorator="[
                  'LaborIntensity',
                  {
                    rules: [{ required: true, message: '职业' }],
                  },
                ]"
                placeholder='体力劳动'
              >
                <a-select-option :value='1'>轻体力劳动</a-select-option>
                <a-select-option :value='2'>中体力劳动</a-select-option>
                <a-select-option :value='3'>重体力劳动</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span='12'>
            <a-form-model-item label='医疗费别'>
              <a-select
                v-model='addParams.payMode'
                v-decorator="[
                  'payMode',
                  {
                    rules: [{ required: true, message: '医疗费别' }],
                  },
                ]"
                placeholder='医疗费别'
              >
                <a-select-option :value='1'>社会医疗基本保险</a-select-option>
                <a-select-option :value='2'>新型农村合作医疗保险</a-select-option>
                <a-select-option :value='3'>城镇居民医疗保险</a-select-option>
                <a-select-option :value='4'>商业保险</a-select-option>
                <a-select-option :value='5'>公费医疗</a-select-option>
                <a-select-option :value='6'>自费医疗</a-select-option>
                <a-select-option :value='7'>其它</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>-->
        <a-row :gutter="[8, 8]">
          <a-col :span="12"></a-col>
          <a-col :span="12"></a-col>
        </a-row>
        <a-row :gutter="[8, 8]">
          <a-col :span="12"></a-col>
          <a-col :span="12"></a-col>
        </a-row>
        <a-row :gutter="[8, 8]">
          <a-col :span="12" align="right">
            <a-button type="primary" @click="handleOk1">
              确定
            </a-button>
          </a-col>
          <a-col :span="12">
            <a-button type="default" @click="handleCancel1">
              取消
            </a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <a-button :style="{ marginBottom: '1rem' }" type="primary" @click="handleBatchDelete"> 删除</a-button>
    <a-modal
      :visible="deletePatientInfoVisible"
      :confirm-loading="confirmLoading"
      @ok="handleOk2"
      @cancel="handleCancel2"
      width="350px"
    >
      <span>请确认是否要删除所选患者</span>
    </a-modal>
    <a-button :style="{ marginBottom: '1rem' }" v-has="'group:change'" type="primary" @click="handleBatchGroup">
      分组</a-button
    >
    <a-modal
      title="请选择分组"
      :visible="batchChangePatientGroupVisible"
      :confirm-loading="confirmLoading"
      @ok="handleOk3"
      @cancel="handleCancel3"
      width="350px"
    >
      <a-select v-model="groupId" :style="{ marginLeft: '2rem' }" style="width: 200px">
        <a-select-option :value="item.dataId" v-for="item in panes" :key="item.dataId">
          {{ item.groupName }}
        </a-select-option>
      </a-select>
    </a-modal>

    <div class="it_search">
      <a-form-model :form="searchform" layout="inline" :rules="validatorRules">
        <a-form-model-item label="标签" prop="tagIds">
          <j-select-patient-tag v-model="patientParams.tagIds" :multi="true"></j-select-patient-tag>
        </a-form-model-item>
        <a-form-model-item label="姓名">
          <a-input v-model="patientParams.patientName" placeholder="输入患者姓名" />
        </a-form-model-item>
        <a-form-model-item label="手机号" prop="patientMobile1">
          <a-input v-model="patientParams.patientMobile" placeholder="输入患者手机号" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="searchPatient">
            查询
          </a-button>
          <a-button type="primary" @click="resetSearch">
            重置
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>

    <a-card :bordered="false" class="card-area">
      <a-tabs :active-key="activeGroupId" tabPosition="top" @change="handleChangeActiveGroupId">
        <a-tab-pane v-for="item in panes" :key="item.dataId">
          <template slot="tab">
            {{ item.groupName }}
            <a-icon
              v-if="item.dataId != 0"
              type="edit"
              v-has="'group:edit'"
              style="margin-left: 10px"
              @click.stop="handleEditGroup(item)"
            />
            <a-popconfirm
              v-has="'group:delete'"
              v-if="item.dataId != 0"
              title="确定删除吗?"
              @confirm.stop="() => handleDeleteGroup(item.dataId)"
            >
              <a-icon type="delete" />
            </a-popconfirm>
          </template>
          <a-table
            :pagination="ipagination"
            :loading="loading"
            rowKey="patientId"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :columns="patientColumns"
            :data-source="patients"
            @change="handleTableChange"
          >
            <a slot="action" slot-scope="text, record">
              <a @click="handleAddPatient(record)">编辑</a>
              <a-divider type="vertical" />
              <a @click="handleGotoHealthManage(record.patientId)">患者管理</a>
              <a-divider type="vertical" />

              <a-dropdown>
                <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a
                      href="javascript:;"
                      @click="
                        showDrawer(record.patientId, record.patientsName, record.appointmentRecord, record.prohibit)
                      "
                      >复诊预约</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;" @click="showProductDrawer(record)">商品推送</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </a>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="addBtn">
          <template slot="tab">
            <a-icon type="plus" @click="handleAddGroup" v-has="'group:add'" />
          </template>
        </a-tab-pane>
      </a-tabs>
    </a-card>

    <group-modal ref="groupModalForm" @ok="groupModalFormOk"></group-modal>

    <!-- <a-card :bordered="false" class="card-area">
      <a-tabs v-model="activeKey" hide-add type="editable-card" @change="changePanel">
        <a-tab-pane v-for="pane in panes" :key="pane.dataId" :tab="pane.groupName" :closable="false">
          <a-table
            :pagination="ipagination"
            :loading="loading"
            rowKey="patientId"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :columns="patientColumns"
            :data-source="patients"
            @change="handleTableChange"
          >
            <a slot="action" slot-scope="text, record">
              <a-button @click="handleGotoHealthManage(record.patientId)">患者管理</a-button>
              <a-button
                @click="showDrawer(record.patientId, record.patientsName, record.appointmentRecord, record.prohibit)"
              >
                复诊预约
              </a-button>
            </a>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card> -->
    <a-drawer title="复诊预约" :width="500" :closable="false" :visible="visible" @close="onClose">
      <div class="flup-item">
        <span>患者姓名</span>
        <span>{{ tempName }}</span>
      </div>

      <div class="flup-item">
        <span>服务机构</span>
        <j-select-depart
          style="width: 200px"
          v-model="flupPostData.orgCode"
          :trigger-change="true"
          customReturnField="orgCode"
          :multi="false"
          :disabled="ifProhibit"
        ></j-select-depart>
        <!-- <j-dict-select-tag v-model='flupPostData.orgCode' dictCode='mechanism' style='width: 200px' placeholder='请选择机构'
          :disabled='ifProhibit' /> -->
      </div>
      <div class="flup-item">
        <span>医生</span>

        <a-select
          placeholder="请选择医生"
          style="width: 200px"
          :allowClear="true"
          v-model="flupPostData.doctorId"
          :disabled="ifProhibit"
          @change="handleSelect"
        >
          <a-select-option v-for="item in flupDoctorsList" :value="item.dataId" :key="item.doctorId"
            >{{ item.doctorsName }}
          </a-select-option>
        </a-select>
      </div>
      <div class="flup-item">
        <span>复诊日期</span>
        <a-date-picker
          :disabled-date="disabledDate"
          v-model="flupPostData.flupDate"
          @change="onChange"
          style="width: 200px"
          :disabled="ifProhibit"
        />
      </div>
      <div class="flup-item">
        <span>时间段</span>

        <j-dict-select-tag
          v-model="flupPostData.flupTime"
          dictCode="flupTimeList"
          style="width: 200px"
          placeholder="请选择时间段"
          :disabled="ifProhibit"
        />
      </div>
      <div class="flup-item">
        <span>复诊流程模版</span>

        <a-select
          placeholder="请选择模版"
          style="width: 200px"
          :allowClear="true"
          v-model="flupPostData.templateId"
          :disabled="ifProhibit"
        >
          <a-select-option v-for="item in flupWaysList" :value="item.dataId" :key="item.dataId"
            >{{ item.templateName }}
          </a-select-option>
        </a-select>
      </div>
      <div class="flup-item" id="tip">
        <span>备注</span>

        <a-input
          type="textarea"
          placeholder="请输入200字以内"
          :auto-size="{ minRows: 2, maxRows: 10 }"
          :style="{ marginTop: '1rem' }"
          v-model="flupPostData.remark"
          :disabled="ifProhibit"
          @change="ifLimit"
          allow-clear
          :maxLength="200"
        />

        <div id="warning" v-if="flupPostData.remark != null">{{ flupPostData.remark.length }}/200</div>

        <a-button type="primary" @click="onSave" :style="{ marginTop: '0.5rem' }"> 提交</a-button>
      </div>
    </a-drawer>
    <product-modal ref="productModalForm" @ok="productModalFormOk"></product-modal>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction, deleteAction } from '@/api/manage'
import { doReleaseData } from '@/api/patient/patient'
import GroupModal from './modules/GroupModal'
import ProductModal from './modules/ProductModal'
import JSelectPatientTag from '@/components/jeecgbiz/JSelectPatientTag'
import moment from 'moment'

const patientColumns = [
  {
    title: '姓名',
    dataIndex: 'patientsName',
    width: 100
  },
  {
    title: '复诊状态',
    dataIndex: 'statusText',
    width: 120,
    filters: [
      {
        text: '未预约',
        value: '未预约'
      },
      {
        text: '待复诊',
        value: '待复诊'
      },
      {
        text: '已复诊',
        value: '已复诊'
      },
      {
        text: '未复诊',
        value: '未复诊'
      },
      {
        text: '复诊中',
        value: '复诊中'
      },
      {
        text: '已预约',
        value: '已预约'
      }
    ],
    filterMultiple: false,
    onFilter: (value, record) => record.statusText.indexOf(value) == 0
  },
  {
    title: '出生日期',
    dataIndex: 'patientsBirthday',
    width: 120
  },
  {
    title: '手机号',
    dataIndex: 'patientsMobile',
    width: 150
  },

  // {
  //   title: '住址',
  //   dataIndex: 'patientsAddress',
  //   width: 200,
  //   align: 'center'
  // },
  {
    title: '简要病史',
    dataIndex: 'patientsDescription',
    width: 200,
    align: 'center'
  },
  {
    title: '操作',
    key: 'operation',
    width: 400,
    fixed: 'right',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  components: { GroupModal, JSelectPatientTag, ProductModal },
  data() {
    return {
      loading: true,
      tags: [],
      selectedTags: [],
      checked1: true,
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      groupParams: {
        orgCode: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.orgCode,
        actId: 120802,
        doctorId: this.doctorId()
      },
      orgCode: '',
      patientQueryUrl: '100/12/1001201',
      addPatientUrl: '/100/12/1001203',
      deletePatientUrl: '/100/12/1001204',
      groupQueryUrl: '100/12/1001205',
      changeGroupIdUrl: '/100/12/1001206',
      flupDoctorsListQueryUrl: '/doctor/list',
      flupWaysListQueryUrl: '/flup/template/list',
      flupSaveOrUpdateUrl: '/flup/patient/saveOrUpdate',
      getTagUrl: '/tag/list',
      patientParams: {
        pageNum: 1,
        pageSize: 10,
        groupId: 0,
        patientName: '',
        patientMobile: '',
        tagIds: ''
      },
      validatorRules: {
        patientMobile1: [{ validator: this.isRightMobile }]
      },
      activeKey: 0,
      panes: [],
      patientColumns,
      patients: [],
      selectedRowKeys: [],
      visible: false,
      flupPostData: {
        patientId: 0
      },
      tempName: '',
      flupDoctorsList: [],
      flupWaysList: [],
      tempFlupInfo: {},
      ifProhibit: false,
      showWordLimit: false,
      batchIds: [],
      batchChangePatientGroupVisible: false,
      confirmLoading: false,
      groupId: 0,
      addPatientInfoVisible: false,
      patientDialogTitle: '新增患者信息',
      isEditPatient: false,
      form: this.$form.createForm(this),
      searchform: this.$form.createForm(this),
      addParams: {},
      deletePatientInfoVisible: false,
      activeGroupId: 0,
      rules: {
        patientName: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
        patientMobile: [
          { required: true, message: '请输入手机号码', trigger: 'change' },
          { validator: this.isRightMobileNumber, message: '手机号码格式不正确' }
        ],
        patientBirth: [{ required: true, message: '请选择时间' }],
        height: [{ required: true, message: '请填写身高' }],
        patientSex: [{ required: true, message: '请选择性别', trigger: 'change' }]
      }
    }
  },
  watch: {
    activeGroupId() {
      this.selectedRowKeys = []
      this.patientParams.groupId = this.activeGroupId
      this.patientParams.pageNum = 1
      this.getPatients()
    },
    'patientParams.tagIds': function() {
      this.getPatients()
    },
    'flupPostData.orgCode': function(value) {
      if (value) {
        this.getFlupDoctorsList()
      }
    }
  },
  created() {
    this.orgCode = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.orgCode
    this.getPatientGroups()
    this.getFlupMessage()
    // this.getTag()
  },
  methods: {
    ...mapGetters(['doctorId']),
    changePanel(key) {
      this.patientParams = {
        pageNum: 1,
        groupId: key
      }
      this.getPatients()
    },
    getPatientGroups() {
      postAction(this.groupQueryUrl, this.groupParams).then(res => {
        if (res.success) {
          this.panes = res.result
          this.panes.unshift({
            dataId: 0,
            doctorId: null,
            groupName: '未分组',
            orgCode: this.orgCode,
            roleCode: null,
            createTime: null,
            isDel: 0
          })

          this.activeGroupId = this.panes[0].dataId
          this.getPatients()
        }
      })
    },
    getPatients() {
      this.selectedRowKeys = []
      this.loading = true
      this.patientParams.doctorId = this.doctorId()
      this.patientParams.orgCode = this.orgCode
      postAction(this.patientQueryUrl, this.patientParams)
        .then(res => {
          if (res.success) {
            this.patients = res.result.records
            this.patients.map((item, index) => {
              switch (item.status) {
                case 0: {
                  item.statusText = '未预约'
                  item.prohibit = false
                  break
                }
                case 1: {
                  item.statusText = '待复诊'
                  item.prohibit = true
                  break
                }
                case 2: {
                  item.statusText = '已复诊'
                  item.prohibit = false
                  break
                }
                case 3: {
                  item.statusText = '未复诊'
                  item.prohibit = false
                  break
                }
                case 4: {
                  item.statusText = '复诊中'
                  item.prohibit = true
                  break
                }
                case 5: {
                  item.statusText = '已预约'
                  item.prohibit = true
                  break
                }
              }
            })
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    getFlupMessage() {
      //getAction(this.flupDoctorsListQueryUrl).then(res => {
      //  if (res.success) {
      //    this.flupDoctorsList = res.result
      //  }
      //})
      postAction(this.flupWaysListQueryUrl, { orgCode: this.orgCode }).then(res => {
        if (res.success) {
          this.flupWaysList = res.result
        }
      })
    },
    getFlupDoctorsList() {
      postAction(this.flupDoctorsListQueryUrl, { orgCode: this.flupPostData.orgCode }).then(res => {
        if (res.success) {
          this.flupDoctorsList = res.result
        }
      })
    },
    // getTag() {
    //   postAction(this.getTagUrl,{}).then((res) => {
    //     if (res.success) {
    //       this.tags = res.result
    //     }
    //   })
    // },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange(pagination) {
      this.ipagination = pagination
      this.patientParams.pageNum = pagination.current
      this.patientParams.pageSize = pagination.pageSize
      this.getPatients()
    },
    handleSelect(item) {
      console.log(item)
    },
    handleGotoHealthManage(id) {
      const query = {}
      query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      query[PAGE_MENU_TYPE.PatientId] = id
      const routeUrl = this.$router.resolve({ path: '/patient/index', query })
      window.open(routeUrl.href, '_blank')
    },
    showDrawer(id, name, record, prohibit) {
      console.log('showDrawer', record, prohibit)
      this.visible = true
      this.tempName = name
      this.ifProhibit = prohibit

      if (record != null) {
        this.flupPostData = {
          dataId: record.dataId,
          doctorId: record.doctorId,
          flupDate: record.flupDate,
          flupTime: record.flupTime,
          orgCode: record.orgCode,
          patientId: id,
          remark: record.remark,
          templateId: record.flupTemplateId
        }
      } else {
        this.flupPostData.patientId = id
      }
    },
    onClose() {
      this.visible = false
      this.flupPostData = {}
      this.showWordLimit = false
    },
    onSave() {
      // this.flupPostData.orgCode = 'A01'
      // this.flupPostData.doctorId = this.doctorId() || 10011045
      if (new Date().getTime() - new Date(this.flupPostData.flupDate).getTime() > 86400000) {
        this.$message.error('该日期不能预约！')
        return
      }
      const params = {
        ...this.flupPostData,
        doctorId: this.flupPostData.doctorId,
        templateId: this.flupPostData.templateId
      }
      postAction(this.flupSaveOrUpdateUrl, params).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.visible = false
          this.getPatientGroups()
          this.flupPostData = {}
        } else {
          this.$message.error(res.message)
        }
      })
    },
    onChange(date, dateString) {
      this.flupPostData.flupDate = dateString
    },
    disabledDate(current) {
      return current < moment().subtract(1, 'day')
    },
    ifLimit(str) {
      if (str.target.value.length >= 200) {
        this.showWordLimit = true
      }
    },

    /**
     * 新增患者
     */
    handleAddPatient(patient) {
      this.isEditPatient = patient && patient.patientId
      this.patientDialogTitle = this.isEditPatient ? '编辑患者信息' : '新增患者信息'
      if (this.isEditPatient) {
        this.addParams = {
          patientId: patient.patientId,
          patientName: patient.patientsName,
          patientMobile: patient.patientsMobile,
          patientSex: patient.patientsSex,
          patientBirth: patient.patientsBirthday,
          height: patient.height,
          weight: patient.weight
        }
      } else {
        this.addParams = {}
      }
      this.addPatientInfoVisible = true
    },
    // 批量删除
    handleBatchDelete() {
      if (this.selectedRowKeys.length == 0) {
        this.$message.error('请选择患者')
      } else {
        this.deletePatientInfoVisible = true
      }
    },
    // 批量分组
    handleBatchGroup() {
      if (this.selectedRowKeys.length == 0) {
        this.$message.error('请选择患者')
      } else {
        this.batchChangePatientGroupVisible = true
      }
    },

    handleOk1(e) {
      this.confirmLoading = true
      //    setTimeout(() => {

      this.$refs.editform.validate(valid => {
        if (valid) {
          this.addParams.doctorId = this.doctorId()
          postAction(this.addPatientUrl, this.addParams).then(res => {
            if (res.success) {
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
          this.addPatientInfoVisible = false
          this.getPatientGroups()
          this.confirmLoading = false
        } else {
          console.log('error')
          return false
        }
      })

      //    }, 2000)
    },
    handleCancel1(e) {
      console.log('Clicked cancel button')
      this.$refs.editform.resetFields()
      this.addPatientInfoVisible = false
      //    this.addParams = {}
    },
    isRightMobile(rule, value, callback) {
      if (typeof this.patientParams.patientMobile === 'undefined' || this.patientParams.patientMobile === '') {
        callback()
      } else {
        const regex = /^1[3456789]\d{9}$/
        if (!regex.test(this.patientParams.patientMobile)) {
          callback(new Error('请输入正确手机格式'))
        } else {
          callback()
        }
      }
    },
    isRightMobileNumber(rule, value, callback) {
      if (typeof value === 'undefined' || value === '') {
        callback()
      } else {
        const regex = /^1[3456789]\d{9}$/
        if (!regex.test(value)) {
          callback(new Error('请输入正确手机格式'))
        }
        callback()
      }
    },

    isHeight(rule, value, callback) {
      if (typeof value === 'undefined' || value === '') {
        callback()
      } else {
        const regex = /^(\+)?\d+(\.\d+)?$/
        if (!regex.test(value)) {
          callback(new Error('请输入正确身高'))
        }
        callback()
      }
    },

    isWeight(rule, value, callback) {
      if (typeof value === 'undefined' || value === '') {
        callback()
      } else {
        const regex = /^(\+)?\d+(\.\d+)?$/
        if (!regex.test(value)) {
          callback(new Error('请输入正确体重'))
        }
        callback()
      }
    },

    disabledDate1(current) {
      return current > moment().endOf('day')
    },

    onChange1(date, dateString) {
      this.addParams.patientBirth = dateString + ' 00:00:00'
    },

    handleOk2(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.deletePatientInfoVisible = false

        postAction(this.deletePatientUrl, {
          patientIds: this.selectedRowKeys
        }).then(res => {
          if (res.success) {
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
        })

        this.getPatientGroups()
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel2(e) {
      console.log('Clicked cancel button')
      this.deletePatientInfoVisible = false
    },

    handleOk3(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.batchChangePatientGroupVisible = false

        postAction(this.changeGroupIdUrl, {
          doctorId: this.doctorId(),
          groupId: this.groupId,
          patientIds: this.selectedRowKeys
        }).then(res => {
          if (res.success) {
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
        })

        this.getPatientGroups()
        this.confirmLoading = false
        this.groupId = 0
      }, 2000)
    },
    handleCancel3(e) {
      console.log('Clicked cancel button')
      this.batchChangePatientGroupVisible = false
      this.groupId = 0
    },

    handleChangeActiveGroupId(key) {
      if (key === 'addBtn') {
        return false
      } else {
        this.activeGroupId = key
      }
    },
    handleAddGroup() {
      this.$refs.groupModalForm.add()
      this.$refs.groupModalForm.title = '新增分组'
      this.$refs.groupModalForm.disableSubmit = false
    },
    handleEditGroup(record) {
      this.$refs.groupModalForm.edit(record)
      this.$refs.groupModalForm.title = '编辑分组'
      this.$refs.groupModalForm.disableSubmit = false
    },
    groupModalFormOk() {
      this.getPatientGroups()
    },
    handleDeleteGroup(id) {
      deleteAction('group/remove', { id, doctorId: this.doctorId() }).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.getPatientGroups()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleChange(tag, checked) {
      const { selectedTags } = this
      const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag)
      console.log('You are interested in: ', nextSelectedTags)
      this.selectedTags = nextSelectedTags
      this.ipagination.current = 1
      this.ipagination.total = 0
      this.patientParams.tagIds = nextSelectedTags.toString()
      this.getPatients()
    },
    searchPatient() {
      this.ipagination.current = 1
      this.ipagination.total = 0
      this.getPatients()
    },
    resetSearch() {
      this.patientParams.patientName = ''
      this.patientParams.patientMobile = ''
      this.patientParams.groupId = this.activeGroupId
      this.patientParams.pageNum = 1
      this.selectedTags = []
      this.patientParams.tagIds = ''
      this.searchform.resetFields()
      this.ipagination.current = 1
      this.ipagination.total = 0
      this.getPatients()
    },
    showProductDrawer(record) {
      this.$refs.productModalForm.show(record.patientId)
      this.$refs.productModalForm.disableSubmit = false
    },
    productModalFormOk() {
      console.log('ok')
    }
  }
}
</script>

<style lang="less" scoped>
.ant-btn {
  margin: 0.2rem;
}

.flup-item {
  margin: 1rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;

  span {
    flex: 1;
  }
}

#tip {
  display: block;

  #warning {
    // margin: 0.3rem;
    text-align: right;
  }
}

.it_search {
  background: white;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  padding: 10px 20px;
  color: rgba(0, 0, 0, 0.85);
}

.it_search > div {
  margin-bottom: 10px;
}

.ant-tag {
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.65);
  margin-bottom: 5px;
}

.ant-tag-checkable-checked {
  border: 1px solid #f5222d;
}
.ant-input-number {
  width: 100%;
}
</style>

